<template>
  <div class="box">
    <div class="box-header">
      <img class="bgc" :src="detail.coverImgUrl" alt />
      <div class="header-right">
        <div class="titles">
          <span class="tag">歌单</span>
          <span class="name">{{detail.name}}</span>
          <div class="title-info">
            <div class="play-count flex">
              <span>歌曲数</span>
              <span class="number">{{detail.trackCount}}</span>
            </div>
            <div class="line"></div>
            <div class="track-count flex">
              <span>播放数</span>
              <span class="number">{{parseInt(detail.playCount/10000)}}万</span>
            </div>
          </div>
          <div class="author">
            <img :src="pic" />
            <span class="author-name">{{name}}</span>
            <span>{{detail.createTime | unix2Time}}创建</span>
          </div>
        </div>
        <div class="control">
          <div class="playall">
            <div class="all" @click="playall">
              <img src="../../assets/play2.png" alt />
              <span>播放全部</span>
            </div>
            <div class="line"></div>
            <div @click="addall" class="add">+</div>
          </div>
          <div class="next" @click="sc">
            <img src="../../assets/collect.png" alt />
            <span>{{favorite}}({{detail.subscribedCount}})</span>
          </div>
          <div class="next">
            <img src="../../assets/share.png" alt />
            <span>分享({{detail.shareCount}})</span>
          </div>
          <div class="next">
            <img src="../../assets/download.png" alt />
            <span>下载全部</span>
          </div>
        </div>
        <div class="tags">
          标签：
          <span v-for="item in detail.tags" :key="item.backgroundCoverId">{{item}}</span>
        </div>
        <div class="description">
          <p :class="{spread: spread}" v-html="'简介：'+des"></p>
          <div class="drop-down" @click="spread = !spread">{{ spread ? '∧' : '∨'}}</div>
        </div>
      </div>
    </div>
    
		<div class="box-content">
      <div class="content-header">
        <ul>
          <li @click="changeColor(1)" :class="{choosed:Name=='list'}">歌曲列表</li>
          <li @click="changeColor(2)" :class="{choosed:Name=='pl'}">评论({{detail.commentCount}})</li>
          <li @click="changeColor(3)" :class="{choosed:Name=='sc'}">收藏者</li>
        </ul>
        <div class="box-search" v-if="Name=='list'">
          <input name="search" v-model="search" placeholder="搜索歌单音乐" />
          <img class="search-icon" src="../../assets/s.png" alt />
        </div>
      </div>
    </div>
    <Item :his="his" :search="search" :show="result" v-if="Name=='list'" />
    <!-- 歌曲列表 -->
    <Comment v-if="Name=='pl'" />
		<!-- 收藏 -->
		<Collection v-if="Name=='sc'" />
  </div>
</template>
 
<script>
import Vue from "vue";
import Item from "./listItem";
import Comment from "./comment";
import Collection from "./collection.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      spread: false,
      Name: "list",
      detail: {},
      his: {},
      pic: "",
      name: "",
      str: "",
      search: "",
      favorite: "收藏", //是否收藏
      result: false,
      playalls: [],
      load:"",
    };
  },
  components: { Item, Comment ,Collection},
  beforeRouteEnter(to, from, next) {
    if (from.name == "hot") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },
  beforeRouteUpdate(to, from, next) {
    this.load = this.$loading.show()
    let id = to.params.id;
    this.init(id);
    next();
  },
  mounted() {
    this.load = this.$loading.show()
    this.init(this.$route.params.id);
  },
  computed: {
    ...mapState(["playlist"]),
    des() {
      return JSON.stringify(this.str).replace(/\\n/gm, "<br/>").replace('"', "").replace('"', "");
    }
  },
  methods: {
    changeColor(n) {
      switch (n) {
        case 1:
          this.Name = "list";
          break;
        case 2:
          this.Name = "pl";
          break;
        case 3:
          this.Name = "sc";
          break;
        default:
          this.Name = "list";
          break;
      }
    },
    sc() {
      //收藏 
      if (this.favorite == "收藏") {
        this.$store.commit("addgedan", {
          id: this.detail.id,
          name: this.detail.name
        });
        this.favorite = "已收藏";
      } else {
        this.$alert({
          ok: () => {
            this.$store.commit("delgedan", this.detail.id);
            this.favorite = "收藏";
          }
        });
      }
    },
    playall() {
      this.listdata();
      if (this.playlist.length) {
        this.$alert({
          title: '"播放全部"将会替换当前的播放列表，是否继续?',
          ok: () => {
            this.$store.commit("playAll", {
              type: "replce",
              list: this.playalls
            });
          }
        });
      } else {
        this.$store.commit("playAll", { type: "replce", list: this.playalls });
      }
    },
    addall() {
      this.listdata();
      this.$store.commit("playAll", { type: "push", list: this.playalls });
    },
    //格式化歌单数据
    listdata() {
      this.detail.tracks.map(item => {
        let playlist = {
          songName: item.name,
          id: item.id,
          name: item.ar[0].name,
          time: Vue.options.filters.durationToTime(item.dt)
        };
        this.playalls.push(playlist);
      });
    },
    //初始化数据
    init(id) {
      this.$api.getdetail({ id }).then(res => {
        this.detail = res;
        this.pic = res.creator.avatarUrl;
        this.name = res.creator.nickname;
        this.str = res.description;
        this.his = res.tracks;
        this.load.hide()
      });

      this.$store.state.gedan.find(item => {
        if (item.id == id) {
          this.favorite = "已收藏";
          return true;
        }
      });
    }
  },
  watch: {
    search() {
      let arr = [];
      let regexp = new RegExp(this.search, "i");
      for (let item of this.detail.tracks) {
        let str = item.name + item.ar[0].name + item.al.name;
        str.search(regexp) !== -1 ? arr.push(item) : null;
      }
      arr.length == 0 ? (this.result = true) : null;
      if (new Set(this.search).has(" ") || this.search === "") {
        this.result = false;
        this.his = this.detail.tracks;
      } else {
        this.his = arr;
      }
    }
  }
};
</script>
<style lang="less">
.box {
  overflow-y: scroll;
  height: inherit;
  position: relative;
  .box-header {
    padding: 20px 20px 60px 30px;
    width: 100%;
    display: flex;
    .header-right {
      margin-left: 30px;
      .titles {
        margin-top: 6px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        .tag {
          display: inline-block;
          color: #e03f40;
          border: 1px solid #e03f40;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 4px;
          margin-top: 2px;
        }
        .name {
          font-size: 22px;
          margin-left: 10px;
          width: 350px;
          display: inline-block;
          opacity: 0.9;
          vertical-align: top;
          line-height: 1.2;
        }
        .title-info {
          display: flex;
          font-size: 12px;
          color: #999;
          text-align: right;
          margin-left: 10px;
          .line {
            display: inline-block;
            width: 1px;
            height: 30px;
            background-color: #999;
            margin: 2px 7px;
            opacity: 0.5;
          }
          .flex {
            display: flex;
            flex-direction: column;
            .number {
              font-weight: 550;
            }
          }
        }
        .author {
          margin: 15px 0;
          height: 30px;
          line-height: 30px;
          display: flex;
          span {
            margin-left: 10px;
            font-size: 12px;
            color: #666;
          }
          .author-name {
            font-size: 15px;
          }
          img {
            width: 30px;
            height: 30px;
            border-radius: 30px;
          }
        }
      }
      .control {
        display: flex;
        color: white;
        > div {
          height: 25px;
          margin-right: 10px;
          padding: 2px 10px;
        }
        .playall {
          background-color: #c62f2f; //b12323
          border-radius: 5px;
          font-size: 13px;
          display: flex;
          padding: 0;
          width: 120px;
          .all {
            display: flex;
            flex: 3;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            &:hover {
              background-color: #b12323;
            }
          }
          .line {
            width: 0.5px;
            height: 100%;
            border-right: 0.7px white dotted;
          }
          .add {
            flex: 1;
            text-align: center;
            line-height: 25px;
            border-radius: 5px;
            &:hover {
              background-color: #b12323;
            }
          }
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
        .next {
          display: flex;
          color: black;
          justify-content: center;
          align-items: center;
          border: 1px solid #e1e1e2;
          font-size: 13px;
          border-radius: 5px;
          &:hover {
            background-color: #f5f5f7;
          }
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }
      .tags {
        font-size: 13px;
        margin-top: 20px;
        margin-bottom: 10px;
        span {
          color: #0c73c2;
          padding: 5px;
        }
      }
      .description {
        display: flex;
        width: 90%;
        justify-content: flex-start;
        position: relative;
        p {
          height: 40px;
          overflow: hidden;
          font-size: 13px;
          text-overflow: ellipsis;
          line-height: 20px;
        }
        .drop-down {
          font-size: 25px;
          line-height: 0.6;
          position: absolute;
          right: -35px;
        }
        .spread {
          height: auto;
        }
      }
    }
    .bgc {
      height: 200px;
      vertical-align: top;
    }
  }
  .box-content {
    height: 28px;
    padding: 0 30px;
    border-bottom: 1px solid #e1e1e2;
    .content-header {
      height: inherit;
      .choosed {
        border-bottom: 5px solid rgb(198, 47, 47);
        color: rgb(198, 47, 47);
      }
      ul {
        list-style-type: none;
        float: left;
        display: flex;
        li {
          padding-bottom: 3px;
          font-size: 15px;
          margin-left: 20px;
          margin-right: 40px;
        }
      }
      .box-search {
        float: right;
        position: relative;
        input {
          border: 1px solid #e1e1e2;
          border-radius: 20px;
          outline-style: none;
          text-indent: 10px;
          height: 19px;
        }
        .search-icon {
          position: absolute;
          width: 15px;
          height: 15px;
          cursor: pointer;
          top: 5px;
          right: 10px;
        }
      }
    }
  }
}
</style>